<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/layui/layui.css" th:href="@{/css/layui/layui.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row" style="display: none">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今日</span>
                        <h5>UV</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${todayUvCount}]]</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今日</span>
                        <h5>注册</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${todayRegisterCount}]]</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今日</span>
                        <h5>成本</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${todayCost}]]</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今日</span>
                        <h5>收益</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${todayProfit}]]</h1>

                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今日</span>
                        <h5>ROI</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">[[${todayRoi}]]</h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">

                <div class="row">
<!--                    <div class="col-sm-6">-->
<!--                        <div class="ibox float-e-margins">-->
<!--                            <div class="ibox-title">-->
<!--                                <h5>在线任务（现在）</h5>-->
<!--                            </div>-->
<!--                            <div class="ibox-content">-->
<!--                                <div class="row">-->
<!--                                    <div class="col-sm-12">-->
<!--                                        <ul class="stat-list" id="current_task_list">-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>注册芝麻分数</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" id="Zhima0" onclick="Zhima(0);">今天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="Zhima1" onclick="Zhima(1);">昨天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="Zhima2" onclick="Zhima(2);">近三天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="Zhima3"  onclick="Zhima(3);">近五天</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <ul class="stat-list" id="list_zhima">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>实名芝麻分数</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" id="sortZhima0" onclick="sortZhima(0);">今天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="sortZhima1" onclick="sortZhima(1);">昨天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="sortZhima2" onclick="sortZhima(2);">近三天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="sortZhima3"  onclick="sortZhima(3);">近五天</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <ul class="stat-list" id="sort_list_zhima">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>API推送成功</h5>
                                <div class="pull-right">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-xs btn-white" id="apiPush0" onclick="apiPush(0);">今天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="apiPush1" onclick="apiPush(1);">昨天</button>
                                        <button type="button" class="btn btn-xs btn-white" id="apiPush2" onclick="apiPush(2);">前天</button>
                                    </div>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <ul class="stat-list" id="api_push_list">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="ibox">
                            <div class="ibox-content">
                                <h5>预警</h5>
                                <table class="table table-stripped small m-t-md">
                                    <tbody id="warnInfo">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-sm-6">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>机构CRM消耗</h5>
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-xs btn-white" id="organizeConsume0" onclick="organizeConsume(0);">今天</button>
                                    <button type="button" class="btn btn-xs btn-white" id="organizeConsume1" onclick="organizeConsume(1);">昨天</button>
                                    <button type="button" class="btn btn-xs btn-white" id="organizeConsume2" onclick="organizeConsume(2);">前天</button>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <ul class="stat-list" id="organize_consume_list">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>机构API消耗</h5>
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-xs btn-white" id="organizeApi0" onclick="organizeApi(0);">今天</button>
                                    <button type="button" class="btn btn-xs btn-white" id="organizeApi1" onclick="organizeApi(1);">昨天</button>
                                    <button type="button" class="btn btn-xs btn-white" id="organizeApi2" onclick="organizeApi(2);">前天</button>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-sm-12">
                                    <ul class="stat-list" id="organize_api_list">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row" style="display: none">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>项目收益-日收益</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" id="echarts-map-chart-profit_date"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row"  style="display: none">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>项目收益-月收益</h5>
                    </div>
                    <div class="ibox-content">
                        <div style="height:600px" id="echarts-map-chart-profit_month"></div>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" th:value="${ctx}" id="ctx" />

    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.min.js}"></script>

    <script type="text/javascript">

        function clearOrganizeApi() {
            $('#organizeApi0').removeClass("active");
            $('#organizeApi1').removeClass("active");
            $('#organizeApi2').removeClass("active");
        }

        function clearOrganizeConsume() {
            $('#organizeConsume0').removeClass("active");
            $('#organizeConsume1').removeClass("active");
            $('#organizeConsume2').removeClass("active");
        }

        function clearApiPush() {
            $('#apiPush0').removeClass("active");
            $('#apiPush1').removeClass("active");
            $('#apiPush2').removeClass("active");
        }


        function clearSortZhima() {
            $('#sortZhima0').removeClass("active");
            $('#sortZhima1').removeClass("active");
            $('#sortZhima2').removeClass("active");
            $('#sortZhima3').removeClass("active");
        }
        function clearZhima() {
            $('#Zhima0').removeClass("active");
            $('#Zhima1').removeClass("active");
            $('#Zhima2').removeClass("active");
            $('#Zhima3').removeClass("active");
        }

        function sortZhima(type) {
            clearSortZhima();

            var ctx = $('#ctx').val()
            var elem = 'sortZhima'+type
            $('#' + elem).addClass("active");

            var url = ctx + "/index/data/sortZhima";
            // console.log(url)
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "type": type
                },
                success: function(result) {
                    if (result.code == 0) {
                        var html = '';
                        for (var index = 0; index < result.data.dataList.length; index++){
                            var item = result.data.dataList[index]
                            html = html + '<li>\n' +
                                '<small>'+item.name+'</small>\n' +
                                '<div class="stat-percent">'+item.number+' <i class="fa fa-level-up text-navy"></i>\n' +
                                '</div>\n' +
                                '<div class="progress progress-mini">\n' +
                                '<div style="width: '+item.rate+'%;" class="progress-bar"></div>\n' +
                                '</div>\n' +
                                '</li>';
                        }

                        $('#sort_list_zhima').html(html);

                    }
                }
            });
        }
        function Zhima(type) {
            clearZhima();

            var ctx = $('#ctx').val()
            var elem = 'Zhima'+type
            $('#' + elem).addClass("active");

            var url = ctx + "/index/data/Zhima";
            // console.log(url)
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "type": type
                },
                success: function(result) {
                    if (result.code == 0) {
                        var html = '';
                        for (var index = 0; index < result.data.dataList.length; index++){
                            var item = result.data.dataList[index]
                            html = html + '<li>\n' +
                                '<small>'+item.name+'</small>\n' +
                                '<div class="stat-percent">'+item.number+' <i class="fa fa-level-up text-navy"></i>\n' +
                                '</div>\n' +
                                '<div class="progress progress-mini">\n' +
                                '<div style="width: '+item.rate+'%;" class="progress-bar"></div>\n' +
                                '</div>\n' +
                                '</li>';
                        }

                        $('#list_zhima').html(html);

                    }
                }
            });
        }


        function organizeConsume(type) {

            clearOrganizeConsume();

            var ctx = $('#ctx').val()
            var elem = 'organizeConsume'+type
            $('#' + elem).addClass("active");

            var url = ctx + "/index/data/organizeConsume";
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "type": type
                },
                success: function(result) {
                    if (result.code == 0) {
                        var html = '';
                        for (var index = 0; index < result.data.dataList.length; index++){
                            var item = result.data.dataList[index]
                            html = html + '<li>\n' +
                                '<small>'+item.name+'    '+item.totalAmount+'</small>\n' +
                                '<div class="stat-percent">'+item.number+' <i class="fa fa-level-up text-navy"></i>\n' +
                                '</div>\n' +
                                '<div class="progress progress-mini">\n' +
                                '<div style="width: '+item.rate+'%;" class="progress-bar"></div>\n' +
                                '</div>\n' +
                                '</li>';
                        }

                        $('#organize_consume_list').html(html);

                    }
                }
            });
        }

        function organizeApi(type) {

            clearOrganizeApi();

            var ctx = $('#ctx').val()
            var elem = 'organizeApi'+type
            $('#' + elem).addClass("active");

            var url = ctx + "/index/data/organizeApi";
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "type": type
                },
                success: function(result) {
                    if (result.code == 0) {
                        var html = '';
                        for (var index = 0; index < result.data.dataList.length; index++){
                            var item = result.data.dataList[index]
                            html = html + '<li>\n' +
                                '<small>'+item.name+'    '+item.totalAmount+'</small>\n' +
                                '<div class="stat-percent">'+item.number+' <i class="fa fa-level-up text-navy"></i>\n' +
                                '</div>\n' +
                                '<div class="progress progress-mini">\n' +
                                '<div style="width: '+item.rate+'%;" class="progress-bar"></div>\n' +
                                '</div>\n' +
                                '</li>';
                        }

                        $('#organize_api_list').html(html);

                    }
                }
            });
        }

        function apiPush(type) {

            clearApiPush();

            var ctx = $('#ctx').val()
            var elem = 'apiPush'+type
            $('#' + elem).addClass("active");

            var url = ctx + "/index/data/apiPush";
            // console.log(url)
            $.ajax({
                type: "post",
                url: url,
                data: {
                    "type": type
                },
                success: function(result) {
                    if (result.code == 0) {
                        var html = '';
                        for (var index = 0; index < result.data.dataList.length; index++){
                            var item = result.data.dataList[index]
                            html = html + '<li>\n' +
                                '<small>'+item.name +'  ¥：'+item.amount+'</small>\n' +
                                '<div class="stat-percent">'+item.number+' <i class="fa fa-level-up text-navy"></i>\n' +
                                '</div>\n' +
                                '<div class="progress progress-mini">\n' +
                                '<div style="width: '+item.rate+'%;" class="progress-bar"></div>\n' +
                                '</div>\n' +
                                '</li>';
                        }

                        $('#api_push_list').html(html);

                    }
                }
            });
        }


        /**
         * 预警信息查询
         */
        function warnInfo() {

            var ctx = $('#ctx').val()
            var url = ctx + "/index/data/warnInfo";

            $.ajax({
                type: "post",
                url: url,
                success: function(result) {
                    if (result.code == 0) {

                        var dataList = result.data.dataList;
                        var html = '';
                        for (var item of dataList){
                            html += "<tr>\n" +
                                "                                <td class=\"no-borders\">\n" +
                                "                                    <i class=\"fa fa-circle text-navy\"></i>\n" +
                                "                                </td>\n" +
                                "                                <td class=\"no-borders\">\n" +
                                "                                    "+item.title+"：<span id=\"smsBanlance\" style=\"color: red\">"+item.message+"</span>\n" +
                                "                                </td>\n" +
                                "                            </tr>"
                        }
                        $('#warnInfo').html(html);
                    }
                }
            });
        }

        function profitInfo() {

            var ctx = $('#ctx').val()
            var url = ctx + "/index/data/profitInfo";

            var profitChartDate = echarts.init(document.getElementById("echarts-map-chart-profit_date"));
            var profitChartMonth = echarts.init(document.getElementById("echarts-map-chart-profit_month"));
            $.ajax({
                type: "post",
                url: url,
                success: function(result) {
                    if (result.code == 0) {

                        // 日收益
                        var profitChartDateOption = {
                            legend: {},
                            tooltip: {},
                            dataset: {
                                source: result.data.dateDataList
                            },
                            xAxis: { type: 'category' },
                            yAxis: {},
                            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                        };

                        profitChartDate.setOption(profitChartDateOption);
                        $(window).resize(profitChartDate.resize);

                        //月收益
                        var profitChartMonthOption = {
                            legend: {},
                            tooltip: {},
                            dataset: {
                                source: result.data.monthDataList
                            },
                            xAxis: { type: 'category' },
                            yAxis: {},
                            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                        };

                        profitChartMonth.setOption(profitChartMonthOption);
                        $(window).resize(profitChartMonth.resize);



                    }
                }
            });
        }

        $(document).ready(function () {

            sortZhima(0);
            Zhima(0);

            organizeConsume(0);

            apiPush(0);

            organizeApi(0);

            warnInfo();

            // 项目收益
            profitInfo();

        });

    </script>
</body>
</html>
